<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:screenHeight + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">并条数据趋势图</view>
		</cu-custom>
		<view class="xiaos_a bg-gradual-blue" style="margin-top: 10rpx;">
			设备维修情况
		</view>
		<view style="margin-bottom: 40rpx;">
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
		</view>
		<view class="xiaos_a bg-gradual-blue">
			使用频率
		</view>
		<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		<!-- <view class="grid col-4 " style="margin-top: 40rpx;margin-bottom: 40rpx;">
			<view class=" text-center" v-for="(item,index) in ColorList" :key="index">
				<button class="cu-btn round" :class="['bg-' + item.name]">{{item.title}}</button>
			</view>
		</view> -->
		<!-- <view :class="['qiun-charts-rotate']"> -->
		<!--#ifndef MP-ALIPAY -->
		<!-- <canvas canvas-id="canvasLineB" id="canvasLineB" class="charts-rotate" @touchstart="touchLineB" @touchmove="moveLineB"
			 @touchend="touchEndLineB"></canvas> -->
		<!-- #endif -->
		<!-- </view> -->
		<!-- <view class="qiun-padding qiun-bg-white ">
			<slider :value="itemCount" min="5" :max="sliderMax" block-color="#f8f8f8" block-size="18" @changing="sliderMove"
			 @change="sliderMove" />
		</view> -->
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import uCharts from '@/colorui/components/u-charts/u-charts.js';
	import {
		ucharts
	} from '@/mixin/mixin.js'
	import {
		getuseHZ
	} from "@/service/selectList.js"
	// 以下路径需根据项目实际情况填写
	import socket from '@/static/js/plus-websocket/index.js'
	var canvaColumn = null;
	var canvaPie = null
	export default {
		mixins: [ucharts],
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				itemCount: 8,
				sliderMax: 50,
				socketTask: null,
				screenWidth: this.screenWidth,
				screenHeight: this.screenHeight,
				ColorList: [{
						title: '一分钟',
						name: 'red',
						color: '#e54d42'
					},
					{
						title: '五分钟',
						name: 'orange',
						color: '#f37b1d'
					},
					{
						title: '一小时',
						name: 'blue',
						color: '#fbbd08'
					},
					{
						title: '24小时',
						name: 'olive',
						color: '#8dc63f'
					}
				]
			}
		},
		computed: {
			...mapGetters(['Style', 'Font', 'BackGround', 'BackGroundBox'])
		},
		onLoad() {
			getuseHZ('粗纱').then(res => {
				if(res.data.data != '') { 
					let Column = {
						categories: [],
						series: [{
							"name": "使用频率",
							"data": []
						}]
					};
					for (let s of res.data.data) {
						Column.categories.push(s.LMACHINENO + '#')
						Column.series[0].data.push(s.RUNTIMES)
					}
					this.showColumn("canvasColumn", Column);
				} else {
					uni.showToast({
						title:'使用频率数据错误',
						icon:"none"
					})
				}
			})
		},
		methods: {
			getServerData() {
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data: {},
					success: (res) => {
						let Pie = {
							series: []
						};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						Pie.series = res.data.data.Pie.series;
						this.showPie("canvasPie", Pie);
					},
					fail: () => {
						this.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showPie(canvasId, chartData) {
				canvaPie = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					background: this.color,
					pixelRatio: this.pixelRatio,
					series: chartData.series,
					animation: true,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					dataLabel: true,
					extra: {
						pie: {
							border: true,
							borderColor: '#FFFFFF',
							borderWidth: 3
						}
					},
				});
			},
			touchPie(e) {
				canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
				canvaPie.touchLegend(e, {
					animation: true
				});
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'column',
					padding: [15, 5, 0, 15],
					legend: {
						show: true,
						padding: 3,
						lineHeight: 11,
						margin: 0,
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
						disabled: false
					},
					yAxis: {
						gridType: 'dash',
						data: [{
							min: 0,
							position: 'right',
							axisLine: true,
							format: (val) => {
								return val.toFixed(0)
							},
						}]
					},
					dataLabel: true,
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: this.cWidth * this.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});
			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
		},
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts-rotate {
		/* width: 750rpx;
		height: 1334rpx; */
		/* background-color: #FFFFFF; */
		/* padding: 25rpx; */
	}

	.charts-rotate {
		/* width: 750rpx;
		height: 1334rpx; */
		/* background-color: #FFFFFF; */
	}
</style>
